<template>
  <div class="page">
    <el-form class="login-container" label-width="0px">
      <h3 class="login-title">管理员登录</h3>
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item>
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="password"
            type="password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 100%; background: #505458; border: none"
            v-on:click="dologin('/admin')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    validateLogin() {
      if (this.username == "") {
        this.$message.error("用户名不能为空");
        return false;
      }
      if (this.password == "") {
        this.$message.error("密码不能为空");
        return false;
      }
      return true;
    },
    async dologin(path) {
      if (!this.validateLogin()) return;
      localStorage.removeItem("usertoken");
      let response = await this.$http({
        url: "/api/admin/login",
        method: "POST",
        params: {
          username: this.username,
          password: this.password,
        },
      }).catch((error) => {
        console.log(error);
        this.$message.error("登录失败 ", error);
        return false;
      });
      console.log("登录API响应：", response);
      if (response.status == 200) {
        var data = response.data;
        localStorage.setItem("usertoken", data.id_token);
        this.$router.push(path);
      }
    },
  },
};
</script>

<style scoped>
.page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/bg.jpeg") no-repeat;
  background-size: cover;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.btn {
  display: flex;
  justify-content: flex-end;
}
</style>
